<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="page" uri="/WEB-INF/tlds/page.tld"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>${ queryScheme.name }</title>	
	<%@ include file="common.jsp" %>
	<script type="text/javascript">
	    function changeColor(val) {
	        if (val == 'male') {
	            return '<span style="color:green;">' + val + '</span>';
	        } else {
	            return '<span style="color:red;">' + val + '</span>';
	        }
	        return val;
	    }
	    
	    function showJuniorInfo(value, cellmeta, record, rowIndex, columnIndex, store) {
	    	var str = "<input type='button' value='查看详细信息' onclick='alert(\"" + 
	    			"这个单元格的值为：" + value + "\\n" + 
	    			"这个单元格的配置为：{cellId:" + cellmeta.cellId + ",id:" + 
	    			cellmeta.id + ",css:" + cellmeta.css + "}\\n" +
	    			"这个单元格对应行的record为:" + record + "}" + 
	    			"这是第" + rowIndex + "行，第" + columnIndex + "列\\n" + 
	    			"表格对应的Ext.data.Store为" + store + "\")' />";
	    			record.get("name");
	    	return str;
	    }
	    
		Ext.onReady(function(){
			var cm = new Ext.grid.ColumnModel([ 
			                                   {header:'编号',dataIndex:'id'}, 
			                                   {header:'名称',dataIndex:'name'}, 
			                                   {header:'描述',dataIndex:'descn'} 
			                                   ]); 
			var data = [['1','name1','desc1','male'],
			            ['2','name2','desc2','female'],
			            ['2','name2','desc2','female'],
			            ['2','name2','desc2','female'],
			            ['2','name2','desc2','female'],
			            ['2','name2','desc2','female'],
			            ['2','name2','desc2','female'],
			            ['2','name2','desc2','female'],
			            ['2','name2','desc2','female'],
			            ['2','name2','desc2','female'],
			            ['2','name2','desc2','female'],
			            ['2','name2','desc2','female'],
			            ['2','name2','desc2','female'],
			            ['2','name2','desc2','female'],
			            ['2','name2','desc2','female'],
			            ['3','name3','desc3','female']];
		    var store = new Ext.data.ArrayStore({
		        fields: [
		           {name: 'id'},
		           {name: 'name'},
		           {name: 'desc'},
		           {name: 'sex'}
		        ]
		    });
		    store.loadData(data);
		    var grid = new Ext.grid.GridPanel({
		        store: store,
		        columns: [
		            new Ext.grid.RowNumberer,
		            {
		                id       :'id',
		                header   : '编号', 
		                width    : 160, 
		                sortable : true, 
		                dataIndex: 'id'
		            },
		            {
		                header   : '名字', 
		                width    : 75, 
		                sortable : true, 
		                dataIndex: 'name'
		            },
		            {
		                header   : '描述', 
		                width    : 75, 
		                sortable : true, 
		                renderer : showJuniorInfo,
		                dataIndex: 'desc'
		            },
		            {
		            	header   : '性别',
		            	width    : 80,
		            	sortable : true,
		            	renderer : changeColor,
		            	dataIndex: 'sex'
		            }
		        ],
		        sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
		        stripeRows: true,
		        height: 350,
		        width: 600,
		        title: 'Array Grid',
		        stateful: true,
		        stateId: 'grid',
		        bbar: new Ext.PagingToolbar({
		        	pageSize:10,
		        	store: store,
		        	displayInfo:true,
		        	displayMsg:'显示第{0}条到{1}条记录，共{2}条',
		        	emptyMsg:'没有记录'
		        })
		    });
			grid.render("grid");
		});
	</script>
</head>
<body>
	<div id="grid"></div>
</body>
</html>